<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 按钮 -->
      <el-button type="primary" @click="addFn">添加分类</el-button>
      <!-- 按钮点击后弹窗 visible默认为false，不显示 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible" width="80%">
        <!-- 弹窗出来为form表单 model为表单的数据对象 rules为表单设置校验-->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 分类名称  将用户输入的值拿到 prop为校验的对象-->
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="ruleForm.cat_name"></el-input>
          </el-form-item>
          <!-- 父级分类 -->
          <el-form-item label="父级分类">
            <!-- 级联选择器 options为可选项的数据源 可在props里面配置相关的键名-->
            <el-cascader
              :options="options"
              :props="{
                expandTrigger: 'hover',
                checkStrictly: true,
                value: 'cat_id',
                label: 'cat_name',
              }"
              :show-all-levels="true"
              clearable
              style="width: 100%"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <!-- 点击取消后提示框隐藏 -->
          <el-button @click="dialogVisible = false">取 消</el-button>
          <!-- 点击确定后 -->
          <el-button type="primary" @click="dialogFun" :plain="true"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="cat_id"
        border
        lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- 分类名称 -->
        <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
        <!-- 是否有效 -->
        <el-table-column prop="name" label="是否有效">
          <i
            class="el-icon-success"
            style="color: #90ee90; font-size: 16px"
          ></i>
        </el-table-column>
        <!-- 排序 -->
        <el-table-column prop="cat_level" label="排序">
          <!-- scope相当于tableData里面的item -->
          <template slot-scope="scope">
            <!-- value为对应的level值   mode则设置为其加对应的样式 -->
            <el-tag :type="levelObj[scope.row.cat_level].mode">{{
              levelObj[scope.row.cat_level].value
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[3, 5, 10, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      type: [3],
      // 对拿到的原始数据做处理  0改成1级 1改成2级 2改成3级
      levelObj: {
        0: {
          mode: 'primary',
          value: '一级',
        },
        1: {
          mode: 'success',
          value: '二级',
        },
        2: {
          mode: 'warning',
          value: '三级',
        },
      },
      currentPage: 1,
      pageSize: 5,
      tableTotal: 0,
      dialogVisible: false,
      rules: {
        cat_name: [
          { required: true, message: '请选择分类名称', trigger: 'blur' },
        ],
      },
      // 设置表单对象的格式
      ruleForm: { cat_pid: '0', cat_name: '', cat_level: 0 },
      selectList: [],
      selectMap: {},
      options: [],
    }
  },
  // 进入页面后调用接口渲染数据
  async created() {
    this.queryTable()
  },
  methods: {
    // 定义一个方法方便其他操作调用后台接口
    async queryTable() {
      const res = await this.$http({
        url: '/categories',
        params: {
          pagenum: this.currentPage,
          pagesize: this.pageSize,
          type: this.type,
        },
      })
      // console.log(res)
      this.tableData = res.data.data.result
      this.tableTotal = res.data.data.total
    },

    // 分页处理 val当前点击的每页条数
    handleSizeChange(val) {
      this.pageSize = val
      this.queryTable()
    },
    // val当前点击的页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryTable()
    },
    // 点击确认后触发这个方法 将拿到的相关数据post到接口上
    async dialogFun() {
      const res = await this.$http({
        method: 'post',
        url: '/categories',
        data: this.ruleForm,
      })
      // console.log(res)
      // 判断post是否成功 如果成功
      if (res.data.meta.status === 201) {
        // 隐藏提示框
        this.dialogVisible = false
        // 调取接口拿最新的数据
        this.queryTable()
        this.$message({
          message: '添加分类成功',
          type: 'success',
        })
      } else {
        this.$message.error('错了哦,添加分类失败')
      }
    },
    //  当我点击添加添加按钮时
    async addFn() {
      // 点击后提示框显示
      this.dialogVisible = true
      // 调取接口拿数据 根据要求 取了二级数据
      const res = await this.$http({
        url: '/categories',
        params: {
          type: 2,
        },
      })
      // console.log(res)
      //将拿取的数据给options这个数据源
      this.options = res.data.data
      // this.ruleForm=''
     
    },
    // 当我点击时 value是一个数组，里面分别是我点击一级和二级页面的id
    handleChange(value) {
      console.log(value, value.length)
      // 做一个判断  当我点击了下拉菜单的数据时
      if (value.length > 0) {
        //将点击对应的父级的id给ruleForm
        this.ruleForm.cat_pid = value[value.length - 1]
        // 拿到点击的当前层级
        this.ruleForm.cat_level = value.length
      }
      // 如果没有点击下拉页面，输入分类名称后，默认level是0，则挂载为一级
    },
  },
}
</script>

<style lang="less" scoped>
</style>
